<template>
  <common-page title="短报文">
    <avue-crud
      ref="crud"
      class="crud-table"
      :option="tableOption"
      :data="dataList"
      :page.sync="page"
      :search.sync="searchForm"
      :table-loading="loading"
      :header-cell-class-name="() => 'crud-table-head'"
      :cell-class-name="() => 'crud-cell'"
      @on-load="getList()"
      @search-change="searchChange"
      @refresh-change="getList()"
      @hook:mounted="$ele.tableMount($refs.crud)"
      @hook:beforeDestroy="$ele.tableDestroy($refs.crud)"
    >
      <template #menuLeft="{ row }">
        <el-button type="primary" @click="handleAdd(row)">新增短报文</el-button>
      </template>
      <template #messageContent="{ row }">
        <div v-if="row.readStatus == 0" style="position: relative; top: 3px">
          <el-badge is-dot class="item">
            {{ row.messageContent }}
          </el-badge>
        </div>
        <span v-else>{{ row.messageContent }}</span>
      </template>
      <template #acceptanceRate="{ row }">
        <div @click="handleShowShip(row)" style="cursor: pointer">
          <el-progress :stroke-width="15" :percentage="percent(row.acceptanceRate)"></el-progress>
        </div>
      </template>
      <template #menu="{ row, size }">
        <el-button type="text" :size="size" @click="handleView(row)">详情</el-button>
        <!-- <el-button type="text" :size="size" @click="handleDelete(row)">删除</el-button> -->
      </template>
      <template #searchMenu="{ size }">
        <el-button type="primary" :size="size" @click="searchChange">查 询</el-button>
        <el-button type="primary" plain :size="size" @click="resetForm">重 置</el-button>
      </template>
    </avue-crud>
    <SendForm ref="sendForm" :shipList="shipList" @ok="handleOk"></SendForm>
    <el-dialog
      title="接收进度"
      :visible.sync="shipVisible"
      :before-close="handleClose"
      :destroy-on-close="!shipVisible"
      custom-class="crud-dialog"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in activities" :key="index" color="#4a91f1">
          <div class="flexBox">
            <span>船舶：{{ activity.shipName }}</span> <span>来源：{{ pushWay[activity.pushWay] || '移动网络' }}</span
            ><span>状态：{{ statusSet[activity.status] }} </span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </common-page>
</template>
<script>
import { getPage, deleteTextMessage, pressRead, getTenantList } from '@/api/shipsms'
import { tableOption } from './index.option'
import SendForm from './sendSms.vue'
export default {
  name: 'Filesms',
  components: {
    SendForm
  },
  data() {
    return {
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      loading: true,
      shipVisible: false,
      form: {},
      dataList: [{ index: 1 }],
      activities: [],
      shipList: [],
      statusSet: { 0: '未接收', 1: '已接收', 2: '已读' },
      pushWay: { 1: '移动网络', 2: '北斗' }
    }
  },
  computed: {
    documentHeight() {
      return this.$store.state.app.documentClientHeight
    },
    tableOption() {
      return tableOption.call(this)
    }
  },
  async created() {
    const { result } = await getTenantList()
    this.shipList = result.shipList
  },
  mounted() {},
  methods: {
    handleShowShip(value) {
      console.log('🤡 ~ value:', value)
      this.activities = value.receiverList
      this.shipVisible = true
    },
    resetForm() {
      this.dataList = []
      this.$refs.crud.searchReset()
      this.page.currentPage = 1
      this.getList()
    },
    percent(val) {
      if (!val) return 0
      return (val * 100).toFixed(0) * 1
    },
    async getList(option) {
      this.searchForm.startTime = this.searchForm.sendTime?.length ? this.searchForm.sendTime[0] : undefined
      this.searchForm.endTime = this.searchForm.sendTime?.length ? this.searchForm.sendTime[1] : undefined
      this.loading = true
      const params = {
        pageNumber: this.page.currentPage,
        pageSize: this.page.pageSize,
        ...this.searchForm,
        sendTime: undefined,
        ...(option || '')
      }
      try {
        const { result } = await getPage(params)
        this.dataList = result.records
        this.page.total = result.total
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    searchChange(form, done) {
      this.page.currentPage = 1
      this.getList(form || '')
      done && done()
    },
    handleClose() {
      this.shipVisible = false
    },
    handleDelete(row, index) {
      this.$confirm('您确定删除该条数据吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'btn-custom-cancel',
        customClass: 'custom-message-box',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteTextMessage(row.id)
          .then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    handleAdd() {
      this.$refs.sendForm.open()
    },
    handleView(row) {
      this.$refs.sendForm.view(row)
    },
    handleOk(form) {
      this.getList()
    },
    // 已读
    handleSend(row) {
      if (!row.messageContent.length) {
        this.$message.error('内容不能为空')
        return
      }
      if (row.messageContent.length > 140) {
        this.$message.error('内容不能超过 140 个字符')
        return
      }
      this.$confirm('确认已读?', '已读', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        const obj = {
          id: row.id,
          readStatus: 1
        }
        pressRead(obj)
          .then(() => {
            this.getList()
            this.$message.success('已读成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.sms-container {
  ::v-deep .el-progress__text {
    color: var(--theme);
  }
}
.flexBox {
  display: flex;
  justify-content: space-between;
  padding-right: 40px;
}
</style>
